<template>
  <!-- <el-dialog 
    v-model="dialogTableVisible" 
    :close-on-click-modal="false"
    width="480"
    class="dialog_dom_co"
    title="修改密码"> -->
  <div class="form_container">
    <div class="form">
      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="0" label-position="left"
        :hide-required-asterisk="true" size="default">
        <div>
          <div class="form-item-label">新密码</div>
          <el-form-item prop="password">
            <div class="form-item-content">
              <el-input type="password" :show-password="true" v-model="form.password"
                placeholder="8位及以上，包含大小写字母、数字、特殊符号" />
            </div>
          </el-form-item>
        </div>
        <div>
          <div class="form-item-label">确认新密码</div>
          <el-form-item prop="confirmPassword">
            <div class="form-item-content">
              <el-input type="password" :show-password="true" v-model="form.confirmPassword" placeholder="请输入确认密码" />
            </div>
          </el-form-item>
        </div>
        <div>
          <div class="form-item-label">手机号</div>
          <el-form-item prop="phone">
            <div class="form-item-content">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </div>
          </el-form-item>
        </div>
        <div>
          <div class="form-item-label">验证码</div>
          <el-form-item prop="code">
            <div class="form-item-content code_container">
              <el-input v-model="form.code" placeholder="请输入验证码" />
              <div class="get_code_but" @click.stop>
                <el-button type="success" :disabled="!['获取验证码', '重新获取'].includes(codeText)" @click="getCode">{{ codeText }}
                </el-button>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <div class="submit_but-container mt-36">
        <el-button class="submit-button1" @click="close">
          取消
        </el-button>
        <el-button class="submit-button1" @click="submit">
          确认修改
        </el-button>
      </div>
    </div>
  </div>
  <!-- </el-dialog> -->
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
// import CommonService from '@/service/impl/common.service'

// const commonService = new CommonService();
const emit = defineEmits()

const dialogTableVisible = ref(false)

const ruleFormRef: any = ref(null);
// FormInstance
const newCode = ref('')
const codeText = ref('获取验证码')
const unchangingNum = 10;
const num = ref(unchangingNum)
/**获取验证码 */
const getCodeNum = async () => {
  // const {msg,code} = await commonService.editInfo(this.form)
  newCode.value = '4572';
  // this.$message[code === 200 ? 'success' : 'error'](msg)
}
const getCode = () => {
  getCodeNum()
  if (num.value = 10) {
    codeText.value = `${num.value}秒`;
  }
  const node = setInterval(() => {
    if (num.value === 1) {
      clearInterval(node)
      num.value = unchangingNum
      codeText.value = `重新获取`
    } else {
      num.value--
      codeText.value = `${num.value}秒`;
    }
  }, 980);
}
const close = () => {
  emit('close', true)
}

const validatePass = (_rule: any, value: any, callback: any) => {
  if (form.password === '') {
    ruleFormRef.value.validateField('password', () => null)
    return
  }
  if (value === '') {
    callback(new Error('请确认新密码！'))
  } else if (value !== form.password) {
    callback(new Error('新密码输入不一致！'))
  } else {
    callback()
  }
}
// 确认验证码
const validateCode = (_rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入验证码！'))
  } else if (value !== newCode.value) {
    callback(new Error('验证码输入不正确！'))
  } else {
    callback()
  }
}

const rules: FormRules = reactive({
  phone: [
    {
      type: 'string',
      trigger: 'change',
      required: true,
      pattern: /^1[3456789]\d{9}$/,
      message: '手机号格式不正确！',
    },
  ],
  password: [
    {
      type: 'string',
      trigger: 'change',
      required: true,
      pattern: /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/,
      message: '请输入8位及以上且包含大小写字母、数字、特殊符号',
    },
  ],
  confirmPassword: [
    { type: 'string', validator: validatePass, trigger: 'change' }
  ],
  code: [
    { type: 'string', validator: validateCode, trigger: 'blur' }
  ],
})

const form = reactive({
  password: '',
  confirmPassword: '',
  phone: '',
  code: '',
})

const init = () => {
  dialogTableVisible.value = true
}

const submit = async () => {
  console.log('ruleFormRef ', ruleFormRef);
  (ruleFormRef.value as FormInstance).validate(async (valid) => {
    if (valid) {
      console.log('true-->', valid)
      // const {msg,code} = await this.userService.editInfo(this.form)
      // this.$message[code === 200 ? 'success' : 'error'](msg)
    }
  })
}

export interface ExposeParams {
  init: () => void
}

defineExpose({
  init
})

</script>

<style>
.dialog_dom_co {
  margin-top: 0 !important;
  top: 50%;
  transform: translateY(-50%);
}
</style>

<style lang="scss" scoped>
.form_container {
  flex: 1 0;
  width: 100%;

  .form {
    flex: 1;
    color: #FFFFFF;
    line-height: normal;
    font-style: normal;
    font-weight: 400;

    :deep(.el-form-item) {
      border: 3px solid rgba(255, 255, 255, 0.40);
      background: #383D48;
      border-radius: 10px;
      height: 50px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .el-input {
        height: 50px;
        padding: 0 14px;

        .el-input__icon {
          font-size: 20px;
          color: #fff;
        }
      }

      .el-input__wrapper {
        box-shadow: none !important;
        background-color: transparent;
        padding: 0;

        .el-input__inner {
          color: #fff;
        }
      }
    }

    .form-item-content {
      flex: 1 0;
    }
  }

  .submit_but-container {
    display: flex;
  }

  .submit-button1,
  .submit-button2 {
    flex: 1 0;
    background-color: #7FD6F5;
    color: #fff;
    height: 46px;
    border: 0;
  }

  .submit-button2 {
    background-color: #FCFCFD;
  }

  .code_container {
    display: flex;
  }

  .get_code_but {
    padding-right: 14px;
    display: flex;
    align-items: center;

    .el-button {
      width: 100px;
      display: block;
    }
  }
}
</style>